<template>
  <div id="course" class="course">
    <!-- 头部 -->
    <div :class="{ header:isCourseMsg.on,header2:isCourseMsg.off }">
      <div class="weekMsg" @click="chooseWeek()">
        <span>第{{ showWeek }}周</span>
        <span class="click-img" id="click-img"></span>
      </div>
      <div class="termMsg">大二 秋季学期</div>
      <div class="chooceWeek" v-show="isCourseMsg.show">
        <ul class="chooce-ul">
          <li v-for="n in 29" :key="n" class="chooce-li" @click="select(n,isSelected)">
            <span :class="{ selected:isSelected }">第{{ n }}周</span>
          </li>
        </ul>
      </div>
      <table class="item-title">
        <td class="month">{{ month }}<div>月</div></td>
        <td v-for="(item,index) in calculateDate" :key="index" class="items">
          <div class="item-week">{{ item.week }}</div>
          <div class="item-date">{{ item.date }}日</div>
        </td>
      </table>
    </div>
    <!-- 主体 -->
    <div>
      <table :class="{ courseMsg:isCourseMsg.on,courseMsg2:isCourseMsg.off }">
        <tr>
          <!-- 侧边表示第几节课 -->
          <td class="grid-number">
            <div class="grid-cell" v-for="(n) in 12" :key="n">{{ n }}</div>
          </td>
          <!-- 课程显示 -->
          <td class="grid-course" v-for=" (item,index) in course" :key="index">
            <div class="grid-div">
              <div class="grid-course-cell"
                v-for="(item,index) in course[index]"
                :key="index"
                :style="{
                  top:computeTop(item),
                  height:computeHeight(item),
                  backgroundColor:computedColor(item.courseCode)
                }"
                @click="popup(item)"
                ><span>{{ item.courseName }}@{{ item.building }}{{ item.classroom }}</span>
                </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <!-- 显示课程详细信息 -->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade" style="border-radius:7px;">
      <ul class="popup-box" >
        <li class="popup-msg" v-for="(value,key) in popupValue" :key="key">
          <span class="popup-text">{{ key }}</span>&nbsp;{{ value }}
        </li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import storage from '../../../libs/storage.js'

export default {
  name: "course",
  data() {
    return {
      course: [], //  当前周课程数据
      month:1, // 当前月份
      showWeek: null, // 当前周
      currentWeek:1, // 默认周
      // openDate:'2/26/2018', // 开学日期
      isSelected:false,
      isCourseMsg:{
        show:false,
        on:true,
        off:false
      },
      calculateDate: [
        { week: "周一", date: null, month:null },
        { week: "周二", date: null, month:null },
        { week: "周三", date: null, month:null },
        { week: "周四", date: null, month:null },
        { week: "周五", date: null, month:null },
        { week: "周六", date: null, month:null },
        { week: "周日", date: null, month:null }
      ],
      popupVisible:false,
      popupValue:{},
      backgroundColor:[
        'rgba(245,150,170,0.7)',
        'rgba(247,92,47,0.7)',
        'rgba(134,193,102,0.7)',
        'rgba(145,152,159,0.7)',
        'rgba(193,50,142,0.7)',
        'rgba(129,199,212,0.7)'
      ],
      detailName:[
        { name:'课程名:', data:'courseName' },
        { name:'学分:', data:'credit' },
        { name:'课程属性:', data:'courseAttribute' },
        { name:'考试类型:', data:'testType' },
        { name:'教师名称:', data:'teacherName' },
        { name:'修读方式:', data:'studyType' },
        { name:'选课状态:', data:'selectState' },
        { name:'课程号:', data:'courseCode' },
        { name:'课序号:', data:'courseNumber' },
        { name:'培养方案:',data:'peiYangFangXiang' }
      ],
      imgUrl:{
        add1:'url(' + require('./image/add1.png') + ')',
        add2:'url(' + require('./image/add2.png') + ')'
      }
    };
  },
  methods: {
    popup:function(data){
      this.popupVisible = true;
      this.popupValue = this.creatDetail(data);
    },
    creatDetail:function(data){
      var detail = {};
      const len = this.detailName.length;
      for(var i = 0; i < len; i++){
        detail[this.detailName[i].name] = data[this.detailName[i].data];
      }
      return detail;
    },
    select:function(weekNumber,select){
      this.showWeek = weekNumber;
    },
    chooseWeek:function() {
      var imgURL = document.getElementById('click-img');
      if(this.isCourseMsg.on === true){
        this.isCourseMsg.show = true;
        this.isCourseMsg.on = false;
        this.isCourseMsg.off = true;
        imgURL.style.backgroundImage = this.imgUrl.add2;
      }else{
        this.isCourseMsg.show = false;
        this.isCourseMsg.on = true;
        this.isCourseMsg.off = false;
        imgURL.style.backgroundImage = this.imgUrl.add1;
      }
    },
    // 找出同一周的课程，再根据周一至周日渲染到课程表上
    rendering:function(data, week) {
      if(storage.getItem('week' + week) === null){
        console.log('week' + week + '为空,调用storage');
        var arr = [];
        // console.log(data);
        var datalen = data.length;
        for (var i = 0; i < datalen; i++) {
          var weeklen = data[i].week.length;
          for (var j = 0; j < weeklen; j++) {
            if (data[i].week[j] === week) {
              arr.push(data[i]);
            }
          }
        }
        var a = [];
        var num = ["1", "2", "3", "4", "5", "6", "7"];
        for (var k = 0; k < 7; k++) {
          a.push(this.merge(arr, num[k]));
        }
        this.course = a;
        this.save(a);
      }else{
        console.log('week' + week + '不为空,从缓存拿数据');
        this.course = storage.getItem('week' + week);
      }
    },
    merge: function(data, num) {
      var arr3 = [];
      for (var i = 0; i < data.length; i++) {
        if (data[i].xingQi === num) {
          arr3.push(data[i]);
        }
      }
      return arr3;
    },
    save: function(data) {
      storage.setItem('week' + this.showWeek,data);
    },
    computeTop: function(item) {
      var jieCi = item.jieCi;
      var top = (jieCi - 1) * 65 * 2 + "px";
      return top;
    },
    computeHeight: function(item) {
      var jieShu = item.jieShu;
      var height = jieShu * 63 + "px";
      return height;
    },
    computedColor:function(data){
      var index = parseInt(data % 6);
      return this.backgroundColor[index];
    },
    computeDate:function(showWeek){
      var arr = [];
      var arr2 = [];
      for(var i = 0; i < 7; i++){
        var o = new Date(this.getOpenDate);
        o.setDate(o.getDate() + (showWeek - 1) * 7 + i);
        arr.push(o.getDate());
        arr2.push(o.getMonth() + 1);
      };
      for(var j = 0; j < 7; j++){
        this.calculateDate[j].date = arr[j];
        this.calculateDate[j].month = arr2[j];
        // console.log(this.calculateDate[j].date,this.calculateDate[j].month);
      };
      this.computeMonth();
    },
    computeMonth:function(){
      var d = new Date().getDay();
      // console.log(d);
      if(d === 0){
        d = 7;
        this.month = this.calculateDate[d - 1].month;
      }else{
        this.month = this.calculateDate[d - 1].month;
      }
    }
  },
  mounted: function() {
    // 钩子函数，在实例被创建的时候计算当前周
    var openDate = new Date(this.getOpenDate);
    // console.log(this.getOpenDate);
    var nowDate = new Date();
    var currentWeek = Math.ceil((nowDate - openDate) / (24 * 60 * 60 * 1000 * 7));
    this.showWeek = currentWeek;
    this.currentWeek = currentWeek;
  },
  computed: {
    ...mapGetters([
      'getCourses',
      'getOpenDate'
    ])
  },
  watch: {
    showWeek:function(newVal,oldVal){
      this.rendering(this.getCourses,newVal);
      this.computeDate(newVal);
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
.course {
  width: 100%;
  background-image: url(./image/img1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}
.header {
  position: relative;
  width: 100%;
  height: 43px;
  background-color: #ffffff;
  position: fixed;
  z-index: 5;
  top: 0px;
  left: 0px;
}
.header2 {
  width: 100%;
  height: 53px;
  background-color: #ffffff;
  position: fixed;
  z-index: 5;
  top: 0px;
  left: 0px;
}
.weekMsg {
  width: 60px;
  font-size: 12px;
  text-align: center;
  margin: 0 auto;
  padding-top: 5px;
}
.termMsg {
  width: 80px;
  font-size: 12px;
  text-align: center;
  display: block;
  margin: 0 auto;
  margin-top: 2px;
}
.chooceWeek {
  width: 100%;
  height: 50px;
  overflow:scroll;
}
.chooce-ul{
  position: relative;
  height: 50px;
  width: 1450px;
  background-color: aquamarine;
}
.chooce-li{
  display: inline-block;
  height:50px;
  width:50px;
  font-size: 12px;
  text-align:center;
  line-height:50px;
  position: relative;
}
.selected{
  display: block;
  width:40px;
  height:40px;
  margin: 0 auto;
  margin-top: 5px;
  line-height: 40px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 3px;
}
.item-title {
  z-index: 5;
  width: 100%;
  height: 40px;
  background-color: #ffffff;
}
.month {
  text-align: center;
  font-size: 12px;
  width: 9%;
}
.items {
  width: 13%;
}
.item-week {
  font-size: 12px;
  text-align: center;
}
.item-date {
  font-size: 12px;
  text-align: center;
}
.courseMsg {
  position: relative;
  width: 100%;
  height: 500px;
  margin-top: 83px;
  margin-bottom: 50px;
  overflow: hidden;
  border-collapse: collapse;
}
.courseMsg2 {
  position: relative;
  width: 100%;
  height: 500px;
  margin-top: 133px;
  margin-bottom: 50px;
  overflow: hidden;
  border-collapse: collapse;
}
.grid-number {
  width: 9%;
  height: 780px;
  background-color: rgba(255, 255, 255, 0.4);
}
.grid-cell {
  height: 65px;
  line-height: 65px;
  text-align: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
}
.grid-course {
  width: 13%;
  height: 780px;
}
.grid-div {
  position: relative;
  height: 780px;
  width: 100%;
}
.grid-course-cell {
  position: absolute;
  width: 94%;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 6px;
  color: #ffffff;
  text-align: center;
  /* line-height: 1.0; */
  overflow: hidden;
}
.popup-box{
  width:160px;
  padding: 14px 14px;
}
.popup-msg{
  font-size: 12px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.popup-text{
  font-size: 12px;
  font-weight: 600;
}
.click-img{
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(./image/add1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
